<template>
  <view>
    <search-input class="search-view"></search-input>
    <view class="container">
      <swiper
        class="swiper"
        circular="true"
        indicator-dots="true"
        autoplay="true"
        interval="2000"
        duration="500"
      >
        <swiper-item v-for="item in bannerList" :key="item.goods_id">
          <image
            :src="item.image_src"
            mode="aspectFill"
            @click="bannerAction(item.goods_id)"
          ></image>
        </swiper-item>
      </swiper>

      <view class="nav-list">
        <navigator
          v-for="(item, index) in navList"
          :key="index"
          open-type="switchTab"
          url="/pages/category/index"
        >
          <image :src="item.image_src" mode="widthFix"></image>
        </navigator>
      </view>

      <view
        class="product-list"
        v-for="(item1, index1) in productList"
        :key="index1"
      >
        <image
          class="title-image"
          mode="heightFix"
          :src="item1.floor_title.image_src"
        ></image>
        <view class="product-container">
          <view
            :class="index2 == 0 ? 'product-frist' : ''"
            v-for="(item2, index2) in item1.product_list"
            :key="index2"
            @click="goodsAction(item1.floor_title.name)"
          >
            <image :src="item2.image_src" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [],
      navList: [],
      productList: [],
    }
  },
  onLoad() {
    this.getBannerList()
    this.getNavList()
    this.getProductData()
  },
  methods: {
    async getBannerList() {
      const value = await this.$http.homeSwiperData()
      this.bannerList = value
    },

    async getNavList() {
      const value = await this.$http.homeCatitems()
      this.navList = value
    },

    async getProductData() {
      const value = await this.$http.homeFloordata()
      this.productList = value
    },

    bannerAction(goods_id) {
      this.$mrouter.push("/pages/detail/index", goods_id)
    },

    goodsAction(name) {
      this.$mrouter.push("/pages/goods/index", { query: name })
    },
  },
}
</script>

<style lang="scss" scoped>
.search-view {
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--window-top);
}

.container {
  margin-top: 100rpx;

  .swiper {
    width: 100%;
    height: 380rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .nav-list {
    display: flex;
    justify-content: space-evenly;
    padding: 30rpx 0;

    image {
      width: 120rpx;
    }
  }

  .product-list {
    .title-image {
      display: block;
      height: 80rpx;
      margin-top: 20rpx;
    }

    .product-container {
      display: grid;
      grid-template-rows: repeat(2, 200rpx);
      grid-template-columns: repeat(3, 33.33%);
      grid-gap: 5rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .product-frist {
      grid-row: 1/3;
      grid-column: 1/2;
    }
  }
}
</style>
